<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
    <div class="routeHeader">
      <el-button @click="goBack">关 闭</el-button>
      <el-button
          type="primary"
          @click="submit"
          :loading="formLoading"
          v-hasPermi="['outsource:outbound-order-form:submit']"
          v-if="formData.dictOutsourceStatus == 10 && formType == 'edit'"
        >
          提交
        </el-button>
    </div>
    <el-scrollbar :style="`height:${contentHeight - 63}px`">
      <el-form
        ref="formRef"
        :model="formData"
        label-width="110px"
        :inline="true"
        v-loading="formLoading"
      >
        <el-form-item label="订单号" prop="orderNumber">
          <el-input
            v-model="formData.orderNumber"
            placeholder="请输入订单号"
            class="!w-220px"
            disabled
          />
        </el-form-item>
        <el-form-item label="订单日期" prop="orderDate">
          <el-date-picker
            v-model="formData.orderDate"
            type="date"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择订单日期"
            class="!w-220px"
            disabled
          />
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input
            v-model="formData.supplierName"
            placeholder="请输入供应商名称"
            class="!w-220px"
            disabled
          />
        </el-form-item>
        <el-form-item label="业务员" prop="salesName">
          <el-input
            v-model="formData.salesName"
            placeholder="请输入业务员"
            class="!w-220px"
            disabled
          />
        </el-form-item>
        <el-form-item label="税率" prop="itaxrate">
          <el-input
            v-model="formData.itaxrate"
            placeholder="请输入税率"
            class="!w-220px"
            disabled
          />
        </el-form-item>
        <el-form-item label="部门" prop="affiliatedFunction">
          <el-input
            v-model="formData.affiliatedFunction"
            placeholder="请输入部门"
            class="!w-220px"
            disabled
          />
        </el-form-item>
        <el-form-item label="收付款协议编码" prop="cvenpuomprotocol">
          <el-input
            v-model="formData.cvenpuomprotocol"
            placeholder="请输入收付款协议编码"
            class="!w-220px"
            disabled
          />
        </el-form-item>
        <el-form-item label="收付款协议名称" prop="protocolName">
          <el-input
            v-model="formData.protocolName"
            placeholder="请输入收付款协议名称"
            class="!w-220px"
            disabled
          />
        </el-form-item>
        <el-form-item label="计划到货日期" prop="planArriveTime">
          <el-date-picker
            v-model="formData.planArriveTime"
            type="date"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择计划到货日期"
            class="!w-220px"
            disabled
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入备注" class="!w-220px" disabled />
        </el-form-item>
      </el-form>
      <el-button
        class="mt-5px mb-5px"
        v-if="formType == 'edit' && formData.dictOutsourceStatus == 20"
        @click="cancelOrder('all')"
        plain
        type="danger"
        :disabled="formLoading"
        v-hasPermi="['outsource:outbound-order-form:cancelOrder']"
        >取消订单</el-button
      >
      <el-table
        ref="singleTableRef"
        :data="formData.childList"
        style="width: 100%"
        border
        class="tableView"
      >
        <el-table-column type="index" label="序号" width="80" align="center" fixed="left" />
        <el-table-column
          v-for="item in tableTitle"
          :key="item.val"
          :prop="item.val"
          :label="item.label"
          min-width="200"
          :align="item.align"
          :header-align="item.align"
        >
          <template #default="scope">
            <template v-if="item.dictType">
              {{ getDictLabel(item.dictType, scope.row[item.val]) }}
            </template>
            <template v-else>
              <el-button
                v-if="item.label == '图纸图号'"
                type="primary"
                link
                @click="jumpPdfFile(scope.row[item.val],scope.row.productNumber)"
                >{{ scope.row[item.val] }}</el-button
              >
              <template v-else>{{ scope.row[item.val] }}</template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="left" fixed="right">
          <template #default="scope">
            <el-button
              size="small"
              link
              type="danger"
              @click="cancelOrder('only', scope.row.id)"
              v-if="formType == 'edit' || scope.row.dictOutsourceStatus == 20 || scope.row.dictOutsourceStatus == 10"
              v-hasPermi="['outsource:outbound-order-form:closeCol']"
              >行关闭</el-button
            >
          </template>
          <!-- v-if="formType == 'edit' && scope.row.dictOutsourceStatus == 20" -->
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
   import { getDictLabel } from '@/utils/dict'
   import * as OutboundOrderFormApi from '@/api/outsource/outsourceIndentManage/outboundOrderForm'
   import { useTagsViewStore } from '@/store/modules/tagsView'
   const message = useMessage() // 消息弹窗
  import { jumpPdfFile } from '@/utils/formCreate'
   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
   const formType = ref('') // 表单的类型：create - 新增；update - 修改
   const formData = ref({
     id: undefined,
     orderNumber: undefined,
     orderDate: undefined,
     supplierName: undefined,
     salesName: undefined,
     itaxrate: undefined,
     affiliatedFunction: undefined,
     cvenpuomprotocol: undefined,
     protocolName: undefined,
     planArriveTime: undefined,
     remark: undefined
   })
   const formRef = ref() // 表单 Ref
  /**提交 */
  const submit = async () => {
    formLoading.value = true
    const data = {
      updateList:formData.value.childList,
      submitFlag:2
    }
     try {
       await OutboundOrderFormApi.submitOutboundOrderForm(data)
       message.success('操作成功')
       goBack()
     } finally {
       formLoading.value = false
     }
  }
   /** 行关闭 */
   const cancelOrder = async (type: string, id?: number) => {
     let ids = []
     if (type == 'only') {
       ids = [id]
     } else {
       ids = formData.value.childList.map((item) => item.id)
     }
     console.log(ids)

     formLoading.value = true
     try {
       await OutboundOrderFormApi.updateOutboundOrderForm(ids)
       message.success('操作成功')
       resetView(formData.value.orderNumber)
     } finally {
       formLoading.value = false
     }
   }
   /**返回 */
   const tagsViewStore = useTagsViewStore()
   const route = useRouter() // 路由
   const goBack = async () => {
     //获取当前路由并删除tagView
     tagsViewStore.delView(route.currentRoute.value)
     //跳转列表页
     route.push({
       path: '/outsource/outsource/indentManage/outsourceIndentManage/outboundOrderForm'
     })
   }
   /** 重置表单 */
   const resetForm = () => {
     formData.value = {
       id: undefined,
       orderNumber: undefined,
       orderDate: undefined,
       supplierName: undefined,
       salesName: undefined,
       itaxrate: undefined,
       affiliatedFunction: undefined,
       cvenpuomprotocol: undefined,
       protocolName: undefined,
       planArriveTime: undefined,
       remark: undefined
     }
     formRef.value?.resetFields()
   }
   //刷新页面
   const resetView = async (id) => {
     formData.value = await OutboundOrderFormApi.getOutboundOrderForm(id)
   }
   const tableTitle = ref([
     {
       label: '委外方式',
       val: 'dictOutsourceMode',
       dictType: 'dict_outsource_mode',
       align: 'left'
     },
     {
       label: '产品编号',
       val: 'dictOutsourceMode',
       align: 'left'
     },
     {
       label: '部件编号',
       val: 'productNumber',
       align: 'left'
     },
     {
       label: '部件名称',
       val: 'partName',
       align: 'left'
     },
     {
       label: '图纸图号',
       val: 'drawingNumber',
       align: 'left'
     },
     {
       label: '部件规格',
       val: 'partSpecification',
       align: 'left'
     },
     {
       label: '材质',
       val: 'material',
       align: 'left'
     },
     {
       label: '产品规格',
       val: 'specification',
       align: 'left'
     },
     {
       label: '净尺寸(长)',
       val: 'netSizeLength',
       align: 'left'
     },
     {
       label: '净尺寸(宽)',
       val: 'netSizeWidth',
       align: 'left'
     },
     {
       label: '下料尺寸(长)',
       val: 'cuttingSizeLength',
       align: 'left'
     },
     {
       label: '下料尺寸(宽)',
       val: 'cuttingSizeWidth',
       align: 'left'
     },
     {
       label: '计划数量',
       val: 'planQuantity',
       align: 'left'
     },
     {
       label: '下单数量',
       val: 'purchaseQuantity',
       align: 'left'
     },
     {
       label: '单位',
       val: 'partUnit',
       align: 'left'
     },
     {
       label: '税率(%)',
       val: 'itaxrate',
       align: 'left'
     },
     {
       label: '含税单价',
       val: 'taxIncludedPrice',
       align: 'right'
     },
     {
       label: '含税金额',
       val: 'priceTaxTotal',
       align: 'right'
     },
     {
       label: '金额',
       val: 'priceExcludingTax',
       align: 'right'
     },
     {
       label: '税额',
       val: 'taxRelief',
       align: 'right'
     },
     {
       label: '单价',
       val: 'unitPrice',
       align: 'right'
     },
     {
       label: '备注',
       val: 'remark',
       align: 'left'
     },
     {
       label: '需求交期',
       val: 'requirementTime',
       align: 'left'
     },
     {
       label: '申购单号',
       val: 'requisitionForm',
       align: 'left'
     },
     {
       label: '状态',
       val: 'dictOutsourceStatus',
       dictType: 'dict_outsource_status',
       align: 'left'
     }
   ])
   // 获得id
   const { query } = useRoute() // 路由的查
   const contentHeight = ref(0)
   /** 初始化 */
   onMounted(async () => {
     formLoading.value = true
     await resetForm()
     if (query.id) {
       await resetView(query.id)
     }
     formType.value = query.type
     contentHeight.value = document.body.clientHeight - 127
     formLoading.value = false
   })
</script>
<style lang="scss" scoped>
   .contentView {
     padding: 10px;
     background: #fff;
   }
   .routeHeader {
     width: 100%;
     border-bottom: 1px solid #969696;
     display: flex;
     align-items: center;
     padding: 10px 0;
   }
</style>
